<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形列表展示</title>
	<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
    <script type="text/javascript" src="../../js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
		$(function(){
			//绑定节点点击事件
			$('#tt').tree({onClick:function(node){
				//alert("您点击了节点：" + node.text);
				$("#org").val(node.text);
			}});
		});
    		
    </script>
</head>

<body class="easyui-layout">
        <div data-options="region:'west',split:true,title:'组织机构'" style="width:200px;padding:10px;">
			<div class="easyui-panel" style="padding:5px">
				<!--读取json数据装载id为tt的easyui树形组件  -->
				<ul id="tt" class="easyui-tree" data-options="url:'../../data/dr/tree_data.json',method:'get',animate:true,lins:true"></ul>
			</div>
        </div>
        <div data-options="region:'center',title:'数据列表',iconCls:'icon-ok'">
        	<div class="easyui-panel"> 
        		<label>您选择了节点：</label>
        		<input class="easyui-textbox" type="text" id="org"/>
        	</div>
        	
            <table class="easyui-datagrid"
                    data-options="url:'../../data/datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
                <thead>
                    <tr>
                        <th data-options="field:'jsontext1'" width="80">井号</th>
                        <th data-options="field:'jsontext2'" width="100">井别</th>
                        <th data-options="field:'jsontext3'" width="80">井型</th>
                        <th data-options="field:'jsontext4'" width="80">甲方单位</th>
                        <th data-options="field:'jsontext5'" width="150">区块</th>
                        <th data-options="field:'status'" width="60">状态</th>
                    </tr>
                </thead>
            </table>
        </div>
</body>
</html>